<template>
  <div>
    <!--按钮-->
    <el-button
      type="primary"
      :disabled="btnDisabled"
      @click="buttonClick()"
    >
      {{buttonMeta.btnTitle}}({{buttonMeta.hotkey}})
    </el-button>
  </div>
</template>

<script>
  import { ref, watch } from 'vue'
  import { ElButton, ElMessageBox, ElMessage } from 'element-plus'
  import { mykeydown } from '../map'

  const msgBox = {
    confirmButtonText: '删除', // + dataListState.choice.dataId,
    cancelButtonText: '后悔了',
    type: 'warning'
  }
  const msgSucess = {
    type: 'success',
    message: '删除成功！'
  }
  const msgError = {
    type: 'info',
    message: '已经取消了。'
  }

  const msgError1 = {
    type: 'info',
    message: '请先选择一条记录。'
  }


</script>

<script setup>

// 属性：模块ID
const props = defineProps({
  moduleId: [Number, String],
  dataId: [Number, String],
  active: Object, // 按钮的meta集合
  buttonMeta: Object,
  reloadPager: Function,
  events: {
    type: Object,
    default: {
      deleteClick: () => {} // 删除按钮的单击事件，已经确实过的
    }
  }
})

const deleteClick = props.events.deleteClick

// 设置按钮是否可用
const btnDisabled = ref(true)

// 单击按钮，执行删除操作
const buttonClick = () => {
  // model.delete(moduleId, actionId, dataId).then(() = > {})
  if (!btnDisabled.value) {
    ElMessageBox.confirm(`此操作将删除该记录(${props.dataId}), 是否继续？`, '温馨提示', msgBox)
      .then(async () => {
        // 调用回调函数
        const re = await deleteClick(props.dataId, props.buttonMeta, props.moduleId)
        if (re) {
          ElMessage(msgSucess)
        }
      })
      .catch(() => {
        // 取消删除操作
        ElMessage(msgError)
      })
  } else {
    // 没有选择记录的提示
    ElMessage(msgError1)
  }
}

// 按钮快捷键
mykeydown(props.buttonMeta.hotkey, (e, isAlt) => {
  if (isAlt && props.active.moduleId === props.moduleId) {
    buttonClick()
  }
})

// 监听选择的变化，记入状态
watch(() => props.dataId, (id) => {
  btnDisabled.value = (props.buttonMeta.btnKind === 'add') ? 
    false : id === ''
},
{ immediate: true })



</script>
